<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>

    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-spacing: 0;
        }

        th, td {
            height: 10%;
            width: 33.33%;
            padding: 10px;
            text-align: center;
            border: 1px solid #ccc;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
    </style>

</head>
<body>

<h1>{{ title }}</h1>
<div id="error" style="color: red"></div>

<form method="post" action="/get-reply-then-draw" onsubmit="return validateForm()">
    <label for="video-url">请输入Bilibili视频链接：</label>
    <input type="text" id="video-url" name="url" value="{{ video_url }}">
    <button type="submit">获取置顶评论留言并抽奖</button>
    <label for="filter-time">评论截止时间：</label>
    <input type="text" id="filter-time" name="filter_time" value="2023-07-08">
</form>

<h2>评论列表（共 {{ data.total }} 条）</h2>

<table id="comment-table">
    <thead>
    <tr>
        <th>用户名</th>
        <th>评论内容</th>
        <th>评论时间</th>
    </tr>
    </thead>
    <tbody id="comment-list">
    {% for reply in data.replies %}
    {% if loop.index == data.winner_index %}
    <tr style="background-color: red;">
        {% else %}
    <tr>
        {% endif %}
        <td>{{ reply['uname'] }}</td>
        <td>{{ reply['message'] }}</td>
        <td>{{ reply['ctime'] }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>

<script>
    function validateForm() {
        const urlInput = document.getElementById('video-url');
        const filterInput = document.getElementById('filter-time');
        const error = document.getElementById('error');

        const urlRegex = /https?:\/\/www\.bilibili\.com\/video\/(BV\w+|av\d+)/i;
        const match = urlInput.value.match(urlRegex);
        if (!match || urlInput.value === '') {
            error.textContent = '请提供有效的Bilibili视频链接';
            return false;
        }

        const filterDate = new Date(filterInput.value);
        if (isNaN(filterDate.getTime())) {
            error.textContent = '请提供有效的评论截止时间';
            return false;
        }

        return true;
    }
</script>


</body>
</html>